<div class="row align-items-center justify-content-between">
    <div class="col-md-auto col-sm-auto">
        <div class="content-header">
            <h1>日志</h1>
        </div>
    </div>
</div>

<div class="box box-primary">
    <div class="box-body">
        <div class="loading-shade" *ngIf="dataSource.loading$ | async">
            <mat-spinner></mat-spinner>
        </div>
        <div class="row m-left-0">
            <div class="col-sm-4">
                <mat-form-field class="w-100">
                    <mat-select [(value)]="nLogResource.level" placeholder="选择等级"
                        (selectionChange)="onLevelChange($event)">
                        <mat-option [value]="">无效</mat-option>
                        <mat-option *ngFor="let level of levels" [value]="level">
                            {{level}}
                        </mat-option>
                    </mat-select>
                </mat-form-field>
            </div>
            <div class="col-sm-4">
                <mat-form-field class="w-100">
                    <mat-select [(value)]="nLogResource.source" placeholder="选择源"
                        (selectionChange)="onSourceChange($event)">
                        <mat-option [value]="">无效</mat-option>
                        <mat-option *ngFor="let source of sources" [value]="source">
                            {{source}}
                        </mat-option>
                    </mat-select>
                </mat-form-field>
            </div>
            <div class="col-sm-4">
                <mat-form-field class="w-100">
                    <input matInput placeholder="搜索消息" #input>
                </mat-form-field>
            </div>
        </div>
        <table mat-table [dataSource]="dataSource" matSort matSortActive="logged" matSortDirection="desc">
            <ng-container matColumnDef="action">
                <th mat-header-cell *matHeaderCellDef> 操作 </th>
                <td mat-cell *matCellDef="let nLog">
                    <button [routerLink]="['/admin/logs', nLog.id]" class="btn btn-success btn-sm m-right-10"
                        type="button">
                        <i class="fas fa-info-circle"></i>
                        <span class="d-none d-sm-inline">详细</span>
                    </button>
                </td>
            </ng-container>
            <ng-container matColumnDef="logged">
                <th mat-header-cell *matHeaderCellDef mat-sort-header> 日期/时间 </th>
                <td mat-cell *matCellDef="let nLog"> {{nLog?.logged | date:"dd/MM/yyyy hh:mm:ss"}} </td>
            </ng-container>
            <ng-container matColumnDef="level">
                <th mat-header-cell *matHeaderCellDef mat-sort-header> 等级</th>
                <td mat-cell *matCellDef="let nLog">
                    <ng-container [ngSwitch]="nLog?.level">
                        <span *ngSwitchCase="'Fatal'" class="badge badge-danger">{{nLog?.level}}</span>
                        <span *ngSwitchCase="'Error'" class="badge badge-danger">{{nLog?.level}}</span>
                        <span *ngSwitchCase="'Warn'" class="badge badge-warning">{{nLog?.level}}</span>
                        <span *ngSwitchDefault class="badge badge-primary">{{nLog?.level}}</span>
                    </ng-container>
                </td>
            </ng-container>
            <ng-container matColumnDef="message">
                <th mat-header-cell *matHeaderCellDef mat-sort-header> 消息 </th>
                <td mat-cell *matCellDef="let nLog"> {{nLog.message | limitTo: 80 }} </td>
            </ng-container>
            <ng-container matColumnDef="source">
                <th mat-header-cell *matHeaderCellDef mat-sort-header> 源 </th>
                <td mat-cell *matCellDef="let nLog"> {{nLog.source}} </td>
            </ng-container>

            <tr mat-header-row *matHeaderRowDef="displayedColumns;sticky: true" style="background-color: #eee;"></tr>
            <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
        </table>
        <ng-container *ngIf="dataSource.count === 0">
            <div class="row">
                <div class="col-sm-12 ml-4 mt-3">
                    <label class="font-weight-bold"> 没有找到数据</label>
                </div>
            </div>
        </ng-container>
        <mat-paginator [length]="nLogResource.totalCount" [pageSize]="nLogResource.pageSize"
            [pageSizeOptions]="[15, 20, 30]"></mat-paginator>
    </div>
</div>
